// EAvatar.qml
import QtQuick 6.2
import QtQuick.Controls

Item {
    id: root
    width: 80   // 默认组件宽度
    height: 80  // 默认组件高度

    // ==========================
    // 用户可设置属性
    // ==========================
    property url avatarSource: "qrc:/src/fonts/pic/avatar.png" // 头像图片路径（默认）
    property real avatarWidth: width       // 外部设置头像宽度
    property real avatarHeight: height     // 外部设置头像高度
    property bool circular: true           // 是否圆形裁剪
    property real borderRadius: 10         // 自定义圆角半径（当 circular=false 时生效）
    property color borderColor: "#000000"  // 边框颜色
    property real borderWidth: 2           // 边框宽度
    property color backgroundColor: "transparent"  // 透明背景
    // ==========================
    // 裁剪容器（关键部分）
    // ==========================
    Rectangle {
        id: container
        width: root.avatarWidth
        height: root.avatarHeight
        anchors.centerIn: parent

        // 如果 circular 为 true → 取最小边的一半，形成完美圆形
        // 否则 → 使用自定义的 borderRadius，形成圆角矩形
        radius: root.circular ? Math.min(width, height)/2 : root.borderRadius

        // ⚠️ 关键：启用裁剪
        // 超出这个矩形圆角区域的图片部分不会被显示
        clip: true

        // ==========================
        // 图片
        // ==========================
        Image {
            id: avatar
            anchors.fill: parent                 // 图片填满容器（container）
            source: root.avatarSource            // 使用外部传入的图片路径
            fillMode: Image.PreserveAspectCrop   // 保持宽高比，超出容器部分会被裁剪
            smooth: true                         // 平滑缩放（防止锯齿）
        }

        // ==========================
        // 边框
        // ==========================
        Rectangle {
            anchors.fill: parent
            color: "transparent"        // 完全透明
            border.color: root.borderColor    // 使用外部设置的边框颜色
            border.width: root.borderWidth    // 使用外部设置的边框宽度
            radius: container.radius          // 圆角和容器一致
        }
    }
}
